<template>
  <div class="order-container">
    <PanelHead :route="route"/>
    <div class="form" >
      <el-form :model="searchForm" inline>
       <el-form-item prop="out_trade_no">
        <el-input v-model="searchForm.out_trade_no" placeholder="请输入订单号" style="width: 300px;" />
       </el-form-item>
       <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
       </el-form-item>
      </el-form>
    </div>
     <el-table :data="tableData.list">
      <el-table-column label="订单号" prop="out_trade_no" />
      <el-table-column label="就诊医院" prop="hospital_name" />
      <el-table-column label="陪诊服务" prop="service_name"/>
      <el-table-column label="陪护师头像" prop="service_name" >
        <template #default="scope">
          <el-image :src="scope.row.companion.avatar" style="width: 40px; height: 40px;"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="陪护师手机号"  >
        <template #default="scope">
          {{ scope.row.companion.mobile }}
        </template>
      </el-table-column>/>
      <el-table-column label="总价" prop="price" />
      <el-table-column label="已付金额" prop="paidPrice" />
      <el-table-column label="订单状态" >
        <template #default="scope">
          <el-tag :type="statusMap(scope.row.trade_state)">{{ scope.row.trade_state }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="下单时间" >
        <template #default="scope">
          <span>{{dayjs(scope.row.order_start_time).format("YYYY-MM-DD")}}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系人手机号"  >
        <template #default="scope">
          {{ scope.row.tel }}
        </template>
      </el-table-column>/>
    </el-table>

    <el-pagination
      v-model:current-page="pagination.pageNum"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="tableData.total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="pagination"
    />
  </div>
</template>

<script setup>
import { orderList } from '../../api';
import { ref, onMounted,reactive } from 'vue';
import dayjs from 'dayjs';
import { useRouter,useRoute } from 'vue-router';
import PanelHead from '../../components/panelHead.vue';

const router = useRouter()
const route = useRoute()

onMounted(() => {
  getListData()
})


const tableData = reactive({
  list: [],
  total: 0
})

const pagination = reactive({
  pageNum: 1,
  pageSize: 10,
});

// 处理分页大小变化
const handleSizeChange = (val) => {
  pagination.pageSize = val
  getListData()
};

// 处理当前页变化
const handleCurrentChange = (val) => {
  pagination.pageNum = val
  getListData()
};

const searchForm = reactive({
  out_trade_no: ''
})

const search = () => { 
  getListData(searchForm)
}

const getListData = (params = {}) => {
  orderList({...pagination,...params}).then(({data}) => {
    console.log(data, 'list data');
    const {list , total} = data.data
    list.forEach(element => {
      element.create_time = dayjs(element.create_time).format('YYYY-MM-DD')
    });
    tableData.list = list
    tableData.total = total
  });
}

const statusMap = (key) => {
  const map = {
    '已取消': 'info',
    '待支付': 'warning',
    '已完成': 'success'
  }
  return map[key]
}

</script>

<style scoped>
.order-container {
  padding: 20px;
}

.form{
  display: flex;
  justify-content: flex-end;
  padding: 10px 0 10px 10px;
  background-color: #fff;
}
</style>
